<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Add event to grid - Sigma Ajax data grid control sample</title>
<meta http-equiv="Content-Language" content="en-us" /> 
<meta name="keywords" content="dhtml grid, AJAX grid, event, trigger " >
<meta name="description" content="How to add event to grid" >

<script src="highlight/jssc3.js" type="text/javascript"></script>
<link href="highlight/style.css" rel="stylesheet" type="text/css" />

<style type="text/css" media="all">@import "./css/doc_no_left.css";</style>
<script src="../../../js/menu.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" media="all" href="../grid/calendar/calendar-blue.css"  />
<script type="text/javascript" src="../grid/calendar/calendar.js"></script>
<script type="text/javascript" src="../grid/calendar/calendar-cn-utf8.js"></script>
<script type="text/javascript" src="../grid/calendar/calendar-setup.js"></script>

<link rel="stylesheet" type="text/css" href="../grid/gt_grid.css" />
<link rel="stylesheet" type="text/css" href="../grid/skin/vista/skinstyle.css" />
<script type="text/javascript" src="./data/test_data.js"></script>
<script type="text/javascript" src="../grid/gt_msg_en.js"></script>
<script type="text/javascript" src="../grid/gt_grid_all.js"></script>
<script type="text/javascript" src="../grid/flashchart/fusioncharts/FusionCharts.js"></script>
    
    
<script type="text/javascript" >

var grid_demo_id = "myGrid1" ;


var dsOption= {

	fields :[
		{name : 'no'  },
		{name : 'country'  },
		{name : 'customer'  },
		{name : 'employee'  },
		{name : 'bill2005' ,type: 'float' },
		{name : 'bill2006' ,type: 'float' },
		{name : 'bill2007' ,type: 'float' },
		{name : 'bill2008' ,type: 'float' },
		{name : 'orderDate' ,type:'date'  }
		
	],

	recordType : 'array',
	data : __TEST_DATA__
}



var colsOption = [
     {id: 'no' , header: "Order No" , width :60 },
     {id: 'employee' , header: "Employee" , width :80 },
	   {id: 'country' , header: "Country" , width :70 },
	   {id: 'customer' , header: "Customer" , width :80 ,editor:{type:"text"} },
	   {id: 'bill2005' , header: "2005" , width :60,editor:{type:"text"}},
	   {id: 'bill2006' , header: "2006" , width :60,editor:{type:"text"}},
	   {id: 'bill2007' , header: "2007" , width :60,editor:{type:"text"}},
	   {id: 'bill2008' , header: "2008" , width :60,editor:{type:"text"}},
	   {id: 'orderDate' , header: "Delivery Date" , width :100,editor:{type:"text"}}
       
];


function echoMessage(str){
    document.getElementById("event_logs").value += str;
}

var overRowNo = "";
var overColno = "";
var gridOption={
	id : grid_demo_id,
	width: "700",  //"100%", // 700,
	height: "200",  //"100%", // 330,
	
	container : 'gridbox', 
	replaceContainer : true, 
	listenResize : false,
	resizable : true,

	dataset : dsOption ,
	columns : colsOption ,
  
  toolbarContent : "print",
  
onComplete:function(grid){
  echoMessage("onComplete called...\n");
},

onResize:function(){
  echoMessage("onResize called...\n");
},

beforeRowSelect:function(record ,row, rowNo,grid){
  echoMessage("beforeSelectRow called - row number:" + rowNo + " ...\n");
  return true;
},

afterRowSelect:function(record ,row, rowNo,grid){
  echoMessage("after SelectRow called - row number:" + rowNo + " ...\n");
  return true;
},

onHeadClick:function(event,headCell,colObj,grid){
  echoMessage("onHeadClick called " + headCell.innerText + " ...\n");
  return false;
},


onCellClick:function(value, record , cell, row,  colNO, rowNO,columnObj,grid){
  echoMessage("onClickCell called - cell value:" + value + " ...\n");
},

onCellDblClick:function(value, record , cell, row,  colNO, rowNO,columnObj,grid){
  echoMessage("onCellDblClick called - cell value:" + value + " ...\n");
},

onRowClick:function(value, record , cell, row,  colNO, rowNO,columnObj,grid){
  echoMessage("onRowClick called - cell value:" + value + " ...\n");
},

beforeEdit:function(){
  //activeCell and activeRecord.
  echoMessage("beforeEdit called...\n");
},

afterEdit:function(){
  echoMessage("afterEdit called...\n");
},

onContextMenu:function(value, record, cell, row, colNo, rowNo,columnObj,grid){
   echoMessage("onContextMenu...\n");
},

onMouseOver: function(value, record, cell, row, colNo, rowNo,columnObj,grid){
  if(!overflag) return;
  if(overRowNo!==rowNo||overColNo!==colNo){
    echoMessage("onMouseOver called - column/row no:" + colNo + "/" + rowNo + "\n");
    overRowNo=rowNo;
    overColNo=colNo;
  }
  		
},

onMouseMove: function(value, record, cell, row, colNo, rowNo,columnObj,grid){
  if(!overflag) return;

    echoMessage("onMouseMove called - column/row no:" + colNo + "/" + rowNo + "\n");
},

onMouseOut: function(value, record, cell, row, colNo, rowNo,columnObj,grid){
    if(!overflag) return;
    echoMessage("onMouseOut called - column/row no:" + colNo + "/" + rowNo + "\n");

},

afterColumnResize: function(col,width,grid){
  if(!overflag) return;
  echoMessage("afterColumnResize called - column id/width:" + col.id + "/" + width + ":" + grid.id + "\n");
},

onKeyDown:function(event){
   echoMessage("onKeyDown called:" + event.keyCode + "\n");
   return false;
}
 
};


var overflag = true;

var mygrid=new Sigma.Grid( gridOption );
Sigma.Util.onLoad( Sigma.Grid.render(mygrid) );


//////////////////////////////////////////////////////////






function Button1_onclick() {
  overflag = !overflag;
  if(overflag){
    document.getElementById("Button1").value = "Disable Mouse Move Event";
  }else{
     document.getElementById("Button1").value = "Enable Mouse Move Event";
  }
}

</script>
</head>
<body>

<div id="page-container">
  <div id="main-nav">
            <div id="logo" style="margin: 10px">
                                        <a href="http://www.sigmawidgets.com/">
                                            <img border="0"  src="images/logo.gif"/></a></div>
                                    <div id="menu">
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/">Home</a></div>
                                        <div class="menuLink" id="menu1">
                                            <a href="http://www.sigmawidgets.com/products/sigma_grid2/">Products </a>
                                        </div>
                                        <div class="menuLink" id="menu2">
                                            <a href="http://www.sigmawidgets.com/company/offshore.html">Company &amp;Services</a>
                                        </div>
                                        <div class="menuLink" id="menu3" >
                                            <a href="http://www.sigmawidgets.com/products/sigma_grid2/demos/"><font color="ff8c00">Live Demo</font></a>
                                        </div>
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/download.html"><font color="ff8c00">Download</font></a>
                                        </div>
                                        <div class="menuLinkHome">
                                            <a href="http://www.sigmawidgets.com/forum"><font color="ff8c00">Forum</font></a>
                                        </div>
                                    </div>
</div>

   
  <div id="header">
  <h1>
      Product - Sigma Grid - Sample</h1>
  </div>

  <div id="content">
    
	  <h2>Event</h2>
      <p>
          Sigma grid provides a number of events that can be used by the developer to meeting
          their special and complex business logic. The following sample demos some of events that fire when the end
          user interacts with the grid. 
          
          </p>
    <div id="bigbox" style="margin:15px;display:!none;">
      <div id="gridbox" style="border:0px solid #cccccc;background-color:#f3f3f3;padding:5px;height:200px;width:700px;" ></div>
    </div>
    <div id="bigboxDetails" style="margin:15px;display:!none;">  &nbsp;</div>
      <p>
          <input id="Button1" type=button value="Disable Mouse Event" language=javascript onclick="return Button1_onclick()" />
          <textarea id="event_logs" style="width: 697px; height: 128px"></textarea></p>
      <h2>Related Links</h2>
      <p><a href="demo_list.html">Demos List</a> - <a href="example_master_details.html">Master/Details</a> - <a href="example_row_height.html">Cell phones shop</a></p>
  </div>
  
  

  <div id="footer">All contents are (c) Copyright 2005 - 2008, Sigma Software Inc. All rights Reserved</div>
</div>

</body>
</html>